<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, useTemplateRef, watchEffect } from "vue";
import type { EChartsOption } from "echarts";

interface IProps {
  option: EChartsOption;
}

// 注册map
import chinaJSON from "../data/china.json";

echarts.registerMap("china", chinaJSON as any);

const echartsRef = useTemplateRef<HTMLElement>("echartsRef");

const props = defineProps<IProps>();

onMounted(() => {
  const echartsInstance = echarts.init(echartsRef.value!, "light", {
    renderer: "canvas"
  });
  // 第一次进入setOption 监听option变化
  watchEffect(() => echartsInstance.setOption(props.option));
  // 监听window的缩放
  window.addEventListener("resize", () => {
    echartsInstance.resize();
  });
});
</script>

<template>
  <div class="base-echarts">
    <div class="echarts" ref="echartsRef"></div>
  </div>
</template>

<style scoped>
.base-echarts {
  .echarts {
    height: 300px;
  }
}
</style>
